<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_数据监视</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			深度监视：
					(1).watch默认不监测对象内部值的改变（监视一层）。
					(2).配置deep:true可以监测对象内部值改变（监视多层）。
				备注：
					(1).Vue自身可以监测对象内部值的改变（无论多深都可以），但Vue提供的watch默认不可以！
					(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<ul>
				<li>姓名：{{name}}</li>
				<li>性别：{{gender}}</li>
				<li>年龄：对外{{age.foreignAge}}，真实{{age.realAge}}</li>
			</ul>
			<span>{{a.b.c.d.e}}</span>
			<hr>
			<button @click="name += '！'">改名</button>
			<button @click="gender += '*'">改性别</button>
			<button @click="age.foreignAge--">改对外年龄</button>
			<button @click="age.realAge++">改真实年龄</button>
			<button @click="age = {foreignAge:17,realAge:36}">彻底换掉age对象</button>
			<button @click="a.b.c.d.e = 999">修改e</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#demo',
			data:{
				name:'张三',
				gender:'男',
				age:{
					foreignAge:18, //对外年龄
					realAge:35 //真实年龄
				},
				a:{
				 b:{
					 c:{
						 d:{
							 e:1
						 }
					 }
				 }
				}
			
			},
			watch:{
				name:{
					handler(value){
						console.log('name发生变化了',value)
					}
				},
				gender:{
					handler(value){
						console.log('gender发生变化了',value)
					}
				},
				//监视一个对象中某个属性
				/* 'age.foreignAge':{
					handler(value){
						console.log('age.foreignAge发生变化了',value)
					}
				} */

				//监视一个对象（并不是监视对象中的属性，而是对象的地址值）
				/* age:{
					handler(value){
						console.log('age发生变化了',value)
					}
				} */

				//监视一个对象（监视的是对象的地址值|、以及对象中的任何一个属性）
				/* age:{
					deep:true,
					handler(value){
						console.log('age或age中的某个属性发生变化了',value)
					}
				}  */

				//一个小测试：对象a，以及对象a中任何一个属性变化都能监视到
				a:{
					deep:true,
					handler(){
						console.log('@')
					}
				}
			}
		})

	</script>
</html>